<script setup lang="ts">
import { useChannelStore } from "@/stores/channel";
import type { ArticleItem } from "@/types";
import axios from "axios";
import { ref, watch } from "vue";
import { useRouter } from "vue-router";

// const router = useRouter();

// const props = defineProps<{
//   channelId: number;
// }>();

const store = useChannelStore();

const list = ref<ArticleItem[]>([]);

watch(
  () => store.channelId,
  async () => {
    //https://geek.itheima.net/v1_0/articles?channel_id=0&timestamp=1729566236287
    const res = await axios.get("http://geek.itheima.net/v1_0/articles", {
      params: {
        channel_id: store.channelId,
        timestamp: Date.now(),
      },
    });
    list.value = res.data.data.results;
  },
  { immediate: true }
);
</script>

<template>
  <div class="article-list">
    <div
      class="article-item"
      v-for="item in list"
      :key="item.art_id"
      @click="$router.push(`/detail/${item.art_id}`)"
    >
      <p class="title">{{ item.title }}</p>
      <img class="img" v-for="url in item.cover?.images" :src="url" alt="" />
      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ item.pubdate }}</span>
      </div>
    </div>
  </div>
</template>
